import { useEffect, useState } from "react";
import { Tooltip, Row, Col} from 'antd';
import VirtualList from 'rc-virtual-list';

import {getEventData} from "../config";

import styles from "../styles/event.module.css";

const ContainerHeight = 320;

const Event = () => {
  const [data, setData] = useState([]);
  
  const appendData = () => {
    setData(data.concat(getEventData()));
  };

  const onScroll = (e) => {
    if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop <= ContainerHeight + 140) {
      console.log(e.currentTarget.scrollHeight - e.currentTarget.scrollTop);
      appendData();
    }
  };

  const listProps = {
    data: data,
    height: ContainerHeight,
    itemHeight: 47,
    itemKey: 'id',
    onScroll: onScroll,
  }

  useEffect(() => {
    appendData();
  }, []);

  const TooltipTitle = (item) => {
    return(
      <div>
        <div>受灾区域名称：{item.emerAreaName}</div>
        <div>受标数量：{item.subjectCount}</div>
      </div>
    )
  }

  return (
    <VirtualList {...listProps}>
      {(item) => (
        <Tooltip title={TooltipTitle(item)}>
          <Row className={styles.listItem}>
            <Col className={styles.listItemName} span={6}>{item.unitName}</Col>
            <Col className={styles.listItemName} span={6}>{item.abnormalWeather}</Col>
            <Col className={styles.listItemName} span={6}>{item.realRiskRank}</Col>
            <Col className={styles.listItemName} span={6}>{item.startTime}</Col>
          </Row>
        </Tooltip>
      )}
    </VirtualList>
  );
};

export default Event;
